<template>
  <!-- 右侧的组件树 -->
  <div>
    <div class="tree" v-if="components && components.length > 0">
      <div v-for="(item, index) in components" :key="index">
        <div class="tree-name" @click="clickComponents(item)">
          <Icon
            v-if="item.slots && showIcon(item)"
            :type="item.info.open ? 'ios-arrow-down' : 'ios-arrow-forward'"
          />
          {{ item.info.name }}
        </div>
        <div v-for="(item1, key) in item.slots" v-show="item.info.open" :key="key">
          <componentTree v-if="showIcon(item)" :components="getComponentSlot(item.slots[key])" />
        </div>
      </div>
    </div>
    <div v-else class="tips">请先拖拽组件到视图区，再查看组件树</div>
  </div>
</template>
<script>
export default {
  name: 'componentTree',

  data() {
    return {
      open: false,
    }
  },
  props: {
    components: {
      type: Array,
      default: null,
    },
  },
  methods: {
    showIcon(item) {
      // slots中只要有一项插槽中有值就显示
      return Object.keys(item.slots).filter((item1) => item.slots[item1].length).length
    },
    // 在组件库components中找到符合slotArr中id的子组件
    getComponentSlot(slotArr) {
      return this.$store.state.components.filter((item) => slotArr.findIndex((item1) => item1.id === item.info.id) > -1)
    },
    clickComponents(item) {
      // if(this.showIcon(item)){
        item.info.open = !item.info.open
      
      let el = document.getElementById(item.info.id)
      el.click()
    },
  },
}
</script>
<style lang="less" scoped>
.tree {
  margin-left: 10px;
  .tree-name {
    cursor: pointer;
  }
}

.tips {
  text-align: center;
  color: #666;
}
</style>
